// UserPublish 组件的 HTML 模板

/**
 * 渲染组件模板
 * @param {HTMLElement} shadowRoot - 组件的 shadow root
 * @param {string} css - 样式字符串
 */
export function render(shadowRoot, css) {
    shadowRoot.innerHTML = `
        <style>${css}</style> 
        <div class="user-publish-container">
            <!-- 发布作品弹窗 -->
            <div class="publish-modal" id="publishModal">
                <div class="publish-form-container">
                    <!-- 关闭按钮 -->
                    <sl-icon-button 
                        name="x-lg" 
                        class="close-btn" 
                        id="closeBtn"
                        label="关闭">
                    </sl-icon-button>

                    <div class="publish-header">
                        <h2 class="publish-title">发布作品</h2>
                        <p class="publish-subtitle">分享您的精彩创作</p>
                    </div>

                    <form class="publish-form" id="publishForm">
                        <!-- 基础信息输入区域 -->
                        <div class="form-section basic-info">
                            <!-- 作品标题 -->
                            <div class="form-group title-group">
                                <label class="form-label required" for="videoTitle">作品标题</label>
                                <sl-input
                                    id="videoTitle"
                                    name="title"
                                    type="text"
                                    placeholder="请输入作品标题"
                                    class="publish-input title-input"
                                    maxlength="100"
                                    required>
                                    <sl-icon name="type" slot="prefix"></sl-icon>
                                </sl-input>
                                <div class="input-helper">
                                    <span class="char-count"><span id="titleCharCount">0</span>/100</span>
                                </div>
                                <div class="error-message" id="titleError"></div>
                            </div>

                            <!-- 作品描述 -->
                            <div class="form-group description-group">
                                <label class="form-label" for="videoDescription">作品描述</label>
                                <sl-textarea
                                    id="videoDescription"
                                    name="description"
                                    placeholder="请描述您的作品内容、创作灵感或想要表达的内容..."
                                    class="publish-textarea description-textarea"
                                    rows="4"
                                    maxlength="500"
                                    resize="vertical">
                                </sl-textarea>
                                <div class="input-helper">
                                    <span class="char-count"><span id="descCharCount">0</span>/500</span>
                                </div>
                                <div class="error-message" id="descriptionError"></div>
                            </div>

                            <!-- 话题标签 -->
                            <div class="form-group tags-group">
                                <label class="form-label" for="videoTags">话题标签</label>
                                <sl-input
                                    id="videoTags"
                                    name="tags"
                                    type="text"
                                    placeholder="输入话题标签，用空格分隔，如：#旅行 #美食 #生活"
                                    class="publish-input tags-input">
                                    <sl-icon name="hash" slot="prefix"></sl-icon>
                                </sl-input>
                                <div class="input-helper">
                                    <span class="input-tip">用空格分隔多个标签</span>
                                </div>
                                <div class="tags-preview" id="tagsPreview"></div>
                                <div class="error-message" id="tagsError"></div>
                            </div>
                        </div>

                        <!-- 媒体文件上传区域 -->
                        <div class="form-section media-upload">
                            <!-- 视频上传 -->
                            <div class="form-group video-group">
                                <label class="form-label required">视频文件</label>
                                <div class="upload-container">
                                    <input type="file" id="videoFile" name="video" accept="video/*" hidden>
                                    <div class="upload-area video-upload" id="videoUploadArea">
                                        <div class="upload-content">
                                            <sl-icon name="cloud-upload" class="upload-icon"></sl-icon>
                                            <p class="upload-text">点击或拖拽视频文件到此处</p>
                                            <p class="upload-hint">支持 MP4, MOV, AVI 格式，最大 100MB</p>
                                        </div>
                                    </div>
                                    <div class="file-preview" id="videoPreview" style="display: none;">
                                        <sl-icon name="file-earmark-play" class="file-icon"></sl-icon>
                                        <span class="file-name"></span>
                                        <sl-icon-button name="x" class="remove-file" size="small"></sl-icon-button>
                                    </div>
                                </div>
                                <div class="error-message" id="videoError"></div>
                            </div>

                            <!-- 封面图片上传 -->
                            <div class="form-group cover-group">
                                <label class="form-label" for="coverImage">封面图片</label>
                                <div class="upload-container">
                                    <input type="file" id="coverImage" name="cover" accept="image/*" hidden>
                                    <div class="upload-area cover-upload" id="coverUploadArea">
                                        <div class="upload-content">
                                            <sl-icon name="image" class="upload-icon"></sl-icon>
                                            <p class="upload-text">点击或拖拽封面图片到此处</p>
                                            <p class="upload-hint">支持 JPG, PNG 格式，建议尺寸 16:9</p>
                                        </div>
                                    </div>
                                    <div class="image-preview" id="coverPreview" style="display: none;">
                                        <img class="preview-image" alt="封面预览">
                                        <sl-icon-button name="x" class="remove-image" size="small"></sl-icon-button>
                                    </div>
                                </div>
                                <div class="error-message" id="coverError"></div>
                            </div>

                            <!-- 背景音乐 -->
                            <div class="form-group music-group">
                                <label class="form-label" for="backgroundMusic">背景音乐</label>
                                <div class="music-section">
                                    <div class="music-name-input">
                                        <sl-input
                                            id="musicName"
                                            name="musicName"
                                            type="text"
                                            placeholder="音乐名称（可选）"
                                            class="publish-input music-name-field">
                                            <sl-icon name="music-note" slot="prefix"></sl-icon>
                                        </sl-input>
                                    </div>
                                    
                                    <div class="upload-container">
                                        <input type="file" id="backgroundMusic" name="music" accept="audio/*" hidden>
                                        <div class="upload-area music-upload" id="musicUploadArea">
                                            <div class="upload-content">
                                                <sl-icon name="music-note-beamed" class="upload-icon"></sl-icon>
                                                <p class="upload-text">点击或拖拽音频文件到此处</p>
                                                <p class="upload-hint">支持 MP3, WAV 格式，最大 10MB</p>
                                            </div>
                                        </div>
                                        
                                        <div class="music-preview" id="musicPreview" style="display: none;">
                                            <sl-icon name="file-earmark-music" class="file-icon"></sl-icon>
                                            <span class="music-info">
                                                <span class="music-file-name"></span>
                                                <span class="music-duration"></span>
                                            </span>
                                            <sl-icon-button name="x" class="remove-music" size="small"></sl-icon-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="error-message" id="musicError"></div>
                            </div>
                        </div>
                      
                        <!-- 发布按钮 -->
                        <div class="publish-actions">
                            <sl-button 
                                variant="default" 
                                size="medium" 
                                class="draft-btn"
                                id="draftBtn">
                                <sl-icon name="file-earmark" slot="prefix"></sl-icon>
                                保存草稿
                            </sl-button>
                            
                            <sl-button 
                                type="submit" 
                                variant="primary" 
                                size="medium" 
                                class="publish-btn"
                                id="publishBtn">
                                <sl-icon name="upload" slot="prefix"></sl-icon>
                                发布作品
                            </sl-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    `;
}